<template>
  <div class="supInfo">
    <ul class="stepBar flex itemsCenter">
      <li class="flex flex-column flex-col1 current">
        <em>1</em>
        <font>提交订单</font>
      </li>
      <li class="flex flex-column flex-col1 current">
        <em>2</em>
        <font>病情描述</font>
      </li>
      <li class="flex flex-column flex-col1">
        <em>3</em>
        <font>在线支付</font>
      </li>
    </ul>
    <ul class="list">
      <router-link class="flex" :to="{path:'childList',query:{scene:'illDesc'}}" tag="li" append>
        <div class="flex itemsCenter listLeft">就诊人</div>
        <div class="flex itemsCenter listRight">
          <em>{{childInfo.childNme}}</em>
          <span class="ebfont eb-arrowR"></span>
        </div>
      </router-link>
      <li class="flex">
        <div class="flex itemsCenter listLeft">疾病名称</div>
        <div class="flex flex-col1 itemsCenter listRight">
          <input type="text" placeholder="未确诊可不填" v-model='illNme'/>
        </div>
      </li>
      <li class="flex" @click="popupActionSheet">
        <div class="flex itemsCenter listLeft">患病时间</div>
        <div class="flex itemsCenter listRight">
          <em>{{illTm}}</em>
          <span class="ebfont eb-arrowR"></span>
        </div>
      </li>
      <li class="flex flex-column mTop">
        <div class="flex itemsCenter listLeft">病情描述</div>
        <div class="flex itemsCenter listRight">
          <textarea placeholder="请描述您的病情、症状、治疗经过以及想要获得的帮助（不得少于10个字）" v-model='illDesc'></textarea>
        </div>
      </li>
      <li class="flex flex-column mTop">
        <div class="flex itemsCenter listLeft">添加图片</div>
        <div class="flex itemsCenter listRight">
          <ul class="supInfoImg">
            <li v-for="(file,index) in fileList">
              <i class="ebfont eb-jia" v-if="!file.url&&!(isLoading&&index==fileIndex)"
                 @click="!isLoading&&chooseImg(index)"></i><!--默认加号-->
              <img :src="file.thumb" v-if="file.url" @click="!isLoading&&showView(file.url)"/><!--url地址-->
              <em class="ebfont eb-jia" v-if="file.url" @click="deleteImg(index)"></em><!--删除图标-->
              <div class="loading" v-show="isLoading&&index==fileIndex">
                <p>{{width}}</p>
                <i :style="{width:width}"></i>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <div class="appBtn" @click="save">保存</div>
    <mt-popup
      :visible="popupVisible"
      popup-transition="popup-fade">
      {{seeImg}}
    </mt-popup>
    <input type="file" name="file" id="file" style="display:none" multiple @change="upload"/>
    <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
  </div>
</template>
<script type="text/ecmascript-6">

  //吐司组件(在main.js引入会有问题:即启动出现一个【空内容Toast】
  //Toast可以在组件中直接引用,不用在Vue中注册
  import {Toast} from 'mint-ui';
  //加载提示框，支持自定义文本和加载图标。
  import {Indicator} from 'mint-ui';
  import qiniu from '../../js/qiniu'
  import constants from '../../js/constants'
  import {mapGetters} from 'vuex';
  export default{
    prop: ["userId"],
    data(){
      return {
        popupVisible: false,
        uid: 122,
        childNme: "",
        sheetVisible: false,
        actions: [],
        timeArr: ["最近24小时", "最近一周", "最近三个月", "最近一年", "一年以上", "不清楚"],
//        data: {
        illTm: '',
        illDesc: '',
        illNme: '',
//        },
        orderId: '',
        isTure: true,

        // 图片上传(最多上传三张)
        fileList: [{
          url: '',// 图片原url(保存)
          thumb: ''// 图片缩略图，默认像素50*50(显示)
        },
          {
            url: '',
            thumb: ''
          },
          {
            url: '',
            thumb: ''
          }],
        // 文件清单的索引
        fileIndex: -1,
        seeImg: '',
        // 进度条控制
        isLoading: false,
        width: '0%'
      }
    },
    computed: {
      childInfo: function () {
        return this.$store.getters.getChildInfo;
      }
    },
    mounted(){
      //使用箭头函数统一操作函数,使用function会在定义阶段直接执行代码内容
      this.actions = [
        {name: this.timeArr[0], method: () => this.chooseContent(0)},
        {name: this.timeArr[1], method: () => this.chooseContent(1)},
        {name: this.timeArr[2], method: () => this.chooseContent(2)},
        {name: this.timeArr[3], method: () => this.chooseContent(3)},
        {name: this.timeArr[4], method: () => this.chooseContent(4)},
        {name: this.timeArr[5], method: () => this.chooseContent(5)}
      ];
      this.orderId = this.$route.query.orderId;
      this.fetchData();
    },
    methods: {
      showView(url){
        this.$router.push({path: 'imgView', query: {imgUrl: url}})
      },
      save: function () {
        //组织参数
        let params = {
          orderId: this.orderId,
          childId: this.childInfo.childId,
          illNme: this.illNme,
          illTm: this.illTm,
          illDesc: this.illDesc
        };
        //必填项检验
        let msg = '';
        if (!params.childId) {
          msg = "孩子姓名不能为空"
          Toast({message: msg, position: 'bottom'});
          return;
        }
        if (!params.illTm) {
          msg = "患病时间不能为空"
          Toast({message: msg, position: 'bottom'});
          return;
        }
        if (!params.illDesc) {
          msg = "病情描述不能为空"
          Toast({message: msg, position: 'bottom'});
          return;
        }
        for (let i = 0; i < this.fileList.length; i++) {
          params["img" + (i + 1)] = this.fileList[i].url;
        }
        //开启遮罩
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
        this.$api.ajax('orderAction', 'addIllDesc', params).then(res => {
          this.$router.push({path: './pay', query: {orderId: this.orderId}});
          //关闭遮罩
          Indicator.close();
        }, res => {
          Indicator.close();
        });
      },
      fetchData: function () {
        this.$api.ajax("orderAction", "getIllDesc", {orderId: this.orderId}).then(res => {
          let cd = res.cd;
          if (cd.hasData) {
            this.illNme = cd.illNme;
            this.illTm = cd.illTm;
            this.illDesc = cd.illDesc;

            this.$store.dispatch("setChildInfo", {childNme: cd.childNme, childId: cd.childId});
          } else {
            this.illNme = '';
            this.illTm = '';
            this.illDesc = '';
            this.$store.dispatch("setChildInfo", {childNme: '', childId: ''});
          }
        });


//        return "当前页面支付后的回调参数为:" + this.$route.query.plan;
      },
      popupActionSheet(){
        this.sheetVisible = true;
      },
      chooseContent(id){
        this.illTm = this.timeArr[id];
      },
      chooseImg: function (index) {
        // 当前浏览器是否兼容文件系统
        if (window.File && window.FileReader && window.FileList && window.Blob) {
          // 打开文件选择器
          this.fileIndex = index;
          document.getElementById('file').click();
        } else {
          alert('The File APIs are not fully supported in this browser.');
        }
      },
      deleteImg: function (index) {
        this.fileIndex = index;
        this.fileList[index].url = ""
        this.fileList[index].thumb = ""
        // this.fileList[index]={url:"",thumb:""} 不会重新引发渲染
      },
      upload: function () {
        let file = event.target.files[0];
        if (!file) {
          return;
        }
        if (this.maxSize) {
          // TODO:文件过滤
        }

        // 获取Token值
        qiniu.getToken(constants.qiniu.userScene).then(res => {
          let token = res.token;
          let domain = res.domain;
          // 上传到七牛
          qiniu.upload(file, token, this.progress).then(res => {
            let mrk = res.mrk;
            let key = res.fileNme;
            if (mrk) {
              let url = qiniu.getUrl(domain, key);
              let thumb = qiniu.getThumb(domain, key);
              this.fileList[this.fileIndex].url = url;
              this.fileList[this.fileIndex].thumb = thumb;
              // 清空当前目标值
              event.target.value = null;
              Toast({message: "上传成功.", position: 'bottom'});
            } else {
              Toast({message: "上传文件失败.", position: 'bottom'});
            }
          }, res => {
            Toast({message: "无法获取图片服务.", position: 'bottom'});
          })
        }, res => {
          Toast({message: "获取token失败.", position: 'bottom'});
        });
      },
      progress: function (event) {
        // 控制进度条
        let rate = parseInt(event.loaded / event.total * 100);
        console.log(rate);
        if (rate == 100) {
          this.isLoading = false;// 显示进度条
        } else {
          this.width = rate + '%';// 进度条动画
          this.isLoading = true;// 不显示进度条
        }
      }
    },
    watch: {
      '$route' (to, from) {
//        if (to.path.indexOf("illDesc")!=-1) {
//            this.fetchData();
//        }
      }
    }
  }
</script>
<style src="../../css/iconfont.css"></style>
<style src="../../css/base.css"></style>
<style src="./style.css"></style>
